<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--v-on:事件名 给元素绑定事件-->
    <input type="button" value="按钮1" v-on:click="fn()">
    <!--@事件名 简写-->
    <input type="button" value="按钮2" @click="fn()">
    <p>{{info}}</p>
    <!--让下拉选的值和info双向绑定-->
    <select v-model="info" @change="changeFn()">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
    </select>
</div>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el: "div",
        data: {
            info: "bj"
        },
        methods: {
            fn: function () {
                alert("xxx");
            },
            changeFn: function () {
                alert("改变了")
            }
        }

    })
</script>
</body>
</html>